<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选中</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <script src="../assets/js/vue.min.js"></script>
    <!-- <script src="../assets/js/touch-0.2.14.min.js"></script> -->
    <script src="../assets/js/jquery.min.js"></script>
    <!-- <script src="../assets/js/iconfont.js"></script> -->
  </head>
  <body id="target" >
    <div id="app">
      <div class="topMenu">
        <span class="topMenu_home">星月区 fdfdfdfdfd</span>
        <span class="topMenu_people">个人中心</span>
      </div>
      <div class="in_mainAll" >
        <div class="in_mainAll_top"></div>
        <div id="sec_mainAll" class="sec_mainAll">

          <squareline v-if="isShowSquareline" :arrdata="arrdata" @selectarr="selectarr" :selectborder="selectborder" v-on:increment1="increment1"></squareline>
<!--           <div class="secpushLine">
            <div class="secpushLine_button" @click="pushLine"> 插入 </div>
          </div> -->
          
        </div>
      </div>

    </div>

    <script type="text/javascript">
      var squareline=Vue.extend({
        // Vue.component("squareline",{
            template:
            '<div>'+
              '<div class="sec_squareLine" v-for="(cell,index) in arrdata">'+
                '<div class="sec_squareLineBox" :class="{select:selectborder[index]}" @click="clickSelect(index,selectborder[index])">'+
                  '<div class="sec_square">'+
                    '<div class="sec_square_1"><img :src="cell.country"></div>'+
                    '<div class="sec_square_2"><span class="sec_square_span">9000</span></div>'+    
                    '<div class="sec_square_3"><span class="sec_square_span">40</span></div>'+  
                    '<div class="sec_square_4"><img :src="cell.arms"></div>'+ 
                    '<div class="sec_square_5"><img src="../assets/images/123.jpg"></div>'+  
                  '</div>'+
                  '<div class="sec_square">'+
                    '<div class="sec_square_1">1</div>'+
                    '<div class="sec_square_2">2</div>'+    
                    '<div class="sec_square_3">3</div>'+  
                    '<div class="sec_square_4">4</div>'+
                    '<div class="sec_square_5">5</div>'+
                  '</div>'+
                  
                  '<div class="sec_square">'+
                    '<div class="sec_square_1">1</div>'+
                    '<div class="sec_square_2">2</div>'+
                    '<div class="sec_square_3">3</div>'+
                    '<div class="sec_square_4">4</div>'+
                    '<div class="sec_square_5">5</div>'+
                  '</div>'+
                '</div>'+
                
      
              '</div>'+
            '</div>',
          props:{
            arrdata:[],
            selectborder:[]
          },
          watch:{

          },
          data:function(){
            return {
              


            }
          },
          mounted(){
            // console.log(this.arrdata)

          },
          methods:{
            clickSelect:function(index,active){
               // alert(JSON.stringify(this.selectborder))
               // alert(index)
        
              this.$emit('selectarr',index,active)
     
              
              // console.log(index)
            },
          }

      })
      //2.注册组件，并制定组件的标签，组件的HTML标签为,<my-component>
      Vue.component('squareline',squareline)
      var Vue = new Vue({
        el: '#app',
        data: {
          isUserList:false,
          isShowSquareline:false,
          arrdata:[
            {
              country:'魏',//国家
              arms:'弓兵',//兵种
              three:'a3',//可删除


              show:false,//展开
              handle:'展开'
            },
            {
              country:'魏',//国家
              arms:'弓兵',//兵种
              three:'a3',//可删除


              show:false,//展开
              handle:'展开'
            }
           
          ],
          selectborder:[],  // 存储选中    请求到arrdata 时，使他们length相同
          country_han:"../assets/images/country_han.png",
          country_qun:"../assets/images/country_qun.png",
          country_shu:"../assets/images/country_shu.png",
          country_wei:"../assets/images/country_wei.png",
          country_wu:"../assets/images/country_wu.png",
          Arms_1:"../assets/images/Arms_1.png",
          Arms_2:"../assets/images/Arms_2.png",
          Arms_3:"../assets/images/Arms_3.png",
        },
        mounted:function(){
          this.start()
          this.changeArrdata()
        },
        methods: {
          selectarr:function (index,active){
            if(active === ''){
              this.selectborder.splice(index,1,true)
            }else{
              this.selectborder.splice(index,1,'')
            }
            debugger
          },
          changeArrdata:function(){
            // 也可以直接返回countru: "../assets/images/country_han.png",
            // 取到数据后调用该方法，把 arrdata的 国家 和 兵种替换
            // country:'魏',
            // country:country_han,
            var _this = this
            this.arrdata.forEach(function(val,index){
              // 改变国家
              if(val.country === '汉'){
                _this.arrdata[index].country = _this.country_han
              }else if(val.country === '魏'){
                _this.arrdata[index].country = _this.country_wei
              }else if(val.country === '群'){
                _this.arrdata[index].country = _this.country_qun
              }else if(val.country === '蜀'){
                _this.arrdata[index].country = _this.country_shu
              }else if(val.country === '吴'){
                _this.arrdata[index].country = _this.country_wu
              }
              // 改变  兵种
              if(val.arms === '骑兵'){
                _this.arrdata[index].arms = _this.Arms_1
              }else if(val.arms === '步兵'){
                _this.arrdata[index].arms = _this.Arms_3
              }else if(val.arms === '弓兵'){
                _this.arrdata[index].arms = _this.Arms_2
              }

              // 数据 更改完毕后   打开  视图

              // // 存储选中    请求到arrdata 时，使他们length相同
              _this.selectborder.push('')

              
            })
            // alert(this.selectArr.length)
            console.log(this.arrdata)
            this.isShowSquareline = true
          },
          start:function(){
            let height = window.screen.availHeight 
            document.getElementById("sec_mainAll").style.height = (height - 57) + "px"
          },

          increment1:function(index,isShow){
            if(isShow === true){
              this.arrdata[index].show = true
              this.arrdata[index].handle = '关闭'
            }else{
              // alert('guanbi')
              this.arrdata[index].show = false
              this.arrdata[index].handle = '展开'
            }
            
          }
          
        },
        

      })

      // https://www.cnblogs.com/hemude7788/p/5937202.html
    </script>
  </body>
</html>
